:root {
  color: var(--font-color);
  --background-color: rgb(20, 18, 24);
  --font-color: #fff;
  --background-primary: #fff;
  --background-secondary: #f9f9fb;
  --background-tertiary: #fff;
  --background-toc-active: #ebeaea;
  --background-mark-yellow: rgba(199, 183, 0, .4);
  --background-mark-green: rgba(0, 208, 97, .4);
  --background-information: rgba(0, 133, 242, .1);
  --background-warning: rgba(255, 42, 81, .1);
  --background-critical: rgba(211, 0, 56, .1);
  --background-success: rgba(0, 121, 54, .1);
  --border-primary: #cdcdcd;
  --border-secondary: #cdcdcd;
  --button-primary-default: #1b1b1b;
  --button-primary-hover: #696969;
  --button-primary-active: #9e9e9e;
  --button-primary-inactive: #1b1b1b;
  --button-secondary-default: #fff;
  --button-secondary-hover: #cdcdcd;
  --button-secondary-active: #cdcdcd;
  --button-secondary-inactive: #f9f9fb;
  --button-secondary-border-focus: #0085f2;
  --button-secondary-border-red: #ff97a0;
  --button-secondary-border-red-focus: #ffd9dc;
}


@media (prefers-color-scheme: light) {
  :root {
    --background-color: rgb(255, 255, 255);
    --font-color: #000;
    --background-primary: #fff;
    --background-secondary: #f9f9fb;
    --background-tertiary: #fff;
    --background-toc-active: #ebeaea;
    --background-mark-yellow: rgba(199,183,0,.4);
    --background-mark-green: rgba(0,208,97,.4);
    --background-information: rgba(0,133,242,.1);
    --background-warning: rgba(255,42,81,.1);
    --background-critical: rgba(211,0,56,.1);
    --background-success: rgba(0,121,54,.1);
    --border-primary: #cdcdcd;
    --border-secondary: #cdcdcd;
    --button-primary-default: #1b1b1b;
    --button-primary-hover: #696969;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #1b1b1b;
    --button-secondary-default: #fff;
    --button-secondary-hover: #cdcdcd;
    --button-secondary-active: #cdcdcd;
    --button-secondary-inactive: #f9f9fb;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: rgb(20, 18, 24);
    --font-color: #fff;
    --background-primary: #1b1b1b;
    --background-secondary: #343434;
    --background-tertiary: #4e4e4e;
    --background-toc-active: #343434;
    --background-mark-yellow: rgba(199,183,0,.4);
    --border-primary: #858585;
    --border-secondary: #696969;
    --button-primary-default: #fff;
    --button-primary-hover: #cdcdcd;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #fff;
    --button-secondary-default: #4e4e4e;
    --button-secondary-hover: #858585;
    --button-secondary-active: #9e9e9e;
    --button-secondary-inactive: #4e4e4e;
  }
}

/* used for things that should be hidden in the ui,
but useful for people who use screen readers */

@charset 'utf-8';

html,
body {
  margin: 0;
  padding: 0;
}

body {
	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.4em;
	min-width: 230px;
	max-width: 550px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 300;
}